<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex</title>
		<style type="text/css">
			.wrapper_top{
                width: 100%;
                height: 100%;
                /* border: 1px solid #333; */
                margin: 0 auto;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
            }
            .left_top{
                width: 500px;
                height: 60px;
                font-size: 13px;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
                margin-left: 30px;
            }

            .right_top{
                width: 180px;
                height: 60px;
                font-size: 13px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 30px;
            }
            .item3{
                width:200px;
                height: 100px;
            }

            .wrapper_mid{
                display: flex;
                width: 100%;
                height: 350px;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .x{
                display: inline-block;
                margin-top: 25px;
                position: relative;
            }
            .k{
                width: 536px;
                height: 38px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
                border-radius: 10px 0 0 10px;
            }
            .n{
                width: 102px;
                height: 38px;
                line-height: 40px;
                float: left;
                background-color: #38f;
                font-size: 16px;
                color: #fff;
                cursor: pointer;
                border-radius: 0 10px 10px 0;
            }
            .t{
                z-index: 1;
                position: absolute;
                right: 113px;
                top: 50%;
                margin-top: -8px;
                height: 16px;
                width: 18px;
                cursor: pointer;
            }
		</style>	
	</head>
	<body>


		<div class="wrapper_top">
			<div class="left_top">
                <div>新闻</div>
                <div>hao123</div>
                <div>地图</div>
                <div>直播</div>
                <div>视频</div>
                <div>贴吧</div>
                <div>学术</div>
                <div>更多</div>
            </div>

            <div class="right_top">
                <div>天气</div>
                <div>设置</div>
                <div>账号</div>
            </div>
        </div>

        <div class="wrapper_mid">
            <div class="pic">
                <img src="img/1.png" >
            </div>
            
            <div class="search_bar">
                <span class="x">
                    <input type="text" class="k"><input type="button" value="百度一下" class="n">
                </span>
            </div>	
		</div>
	</body>
</html>
